<template>
  <view class="personChoose">
    <block v-if="isMutil">
      <u-checkbox-group @change="checkboxGroupChange">
        <view
          class="mulitiLisMore"
          v-for="(item, index) in dataLis"
          :key="item.id"
        >
          <u-checkbox
            @change="checkboxChange($event, index)"
            v-model="item.checked"
            :name="item.id"
          >
            <view class="jobCard mL10 mR10" :class="isMutil ? 'showSqu' : ''">
              <view class="top">
                <image
                  class="checkImg"
                  v-if="item.checked"
                  :src="resources.checked"
                  mode=""
                ></image>
                <image
                  class="checkImg"
                  v-else
                  :src="resources.noCheck"
                  mode=""
                ></image>
                <view class="font16 bold u-3">
                  {{ item.name }}
                </view>
              </view>
              <view class="line"></view>
              <view class="flex uPalce-grey font13"
                >支付金额：<view class="u_balck font13 mL5"
                  >￥{{ item.money }}</view
                ></view
              >
              <view class="flex uPalce-grey font13"
                >支付时间：<view class="font13 mL5">{{
                  item.payTime
                }}</view></view
              >
            </view>
          </u-checkbox>
        </view>
      </u-checkbox-group>
    </block>
  </view>
</template>

<script>
import { rightNowBm } from "@/api/userInterface/job.js";
import { getPhone } from "@/api/userInterface/job";

export default {
  props: {
    isMutil: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: [],
    },
  },
  watch: {
    list: {
      immediate: true,
      handler(val) {
        if (this.isMutil && val.length > 0) {
          this.dataLis = val.map((v) => {
            return {
              ...v,
              checked: false,
            };
          });
        }
        this.dataLis = val;
      },
    },
    dataLis: {
        immediate: true,
        handler(val) {
            console.log(val,'val');
            
        }
    }
  },
  data() {
    return {
      dataLis: [],
    };
  },
  mounted() {},
  methods: {
    checkboxGroupChange(e) {
      if (!this.isMutil) return;
      if(e.length == this.dataLis.length){
        this.$emit("checkAll", true);
      } else {
        this.$emit("checkAll", false);
      }
      this.$emit("choosePerson", e);
    },
    checkboxChange(e, i) {
    },
    allCheck(e) {
      if (e == false) {
        this.dataLis.map((v) => {
          v.checked = false;
        });
      } else {
        this.dataLis.map((v) => {
          v.checked = true;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.personChoose {
  .u-checkbox-group {
    width: 100%;
  }
}

::v-deep .jobCard {
  width: calc(100% - 60rpx) !important;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  position: relative;

  &.showSqu {
    padding-left: 66rpx;
    width: 690rpx !important;

    .checkImg {
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      left: 25rpx;
      top: 32rpx;
    }
  }
  .line {
    width: 100%;
    height: 2rpx;
    margin: 26rpx 0 32rpx 0;
    background: #f2f4fa;
  }
  .employeeInfo {
    display: flex;
    .mark {
      color: #ff9c00;
      font-size: 30rpx;
    }
    .orderNumtitle {
      color: #666666;
    }
  }

  .u-checkbox__icon-wrap--square {
    display: none;
    position: absolute;
  }

  .u-checkbox__label {
    width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }

  .jobName {
    // max-width:200rpx;
  }

  .jobLeft {
    width: 70%;
  }

  .jobStatus {
    border: 2rpx solid #ff0000;
    border-radius: 10rpx;
    height: 34rpx;
    line-height: 34rpx;
    padding: 0 10rpx;
    margin-right: 10rpx;
  }

  .jobTag {
    height: 34rpx;
    line-height: 34rpx;
    padding: 0 10rpx;
    background: #f8f8f8;
    border-radius: 6rpx;
  }

  .jobMoney {
    word-break: keep-all;
  }

  .jobTime {
    color: #8d8d8d;
    font-size: 26rpx;
    margin-right: 10rpx;
    height: 44rpx;
    line-height: 44rpx;
    padding: 0 20rpx;
    background: #f8f8f8;
    border-radius: 6rpx;
    margin-top: 16rpx;
  }

  .posImg {
    width: 32rpx;
    height: 32rpx;
  }

  .posTxt {
    width: calc(100% - 42rpx);
    font-weight: 400;
    font-size: 26rpx;
    color: #8d8d8d;
  }

  .companyImg {
    width: 48rpx;
    height: 48rpx;
  }

  .rzImg {
    width: 24rpx;
    height: 24rpx;
  }

  .companyName {
    font-weight: 500;
    font-size: 30rpx;
    color: #333;
    margin-right: 10rpx;
    margin-left: 10rpx;
  }
}
</style>
